<template>
  <n-layout style="margin-top: 20px;" >
    <n-card>
      <n-thing >
        <template  #avatar>
          <n-avatar
              round
              :size="200"
              :src="info.picUrl || 'https://dummyimage.com/140x140/b87676/fff.jpg&text=歌手'"
          />
        </template>
        <template  #header>
          <h2>{{ info.name }}</h2>
        </template>
        <template #description>
          <n-ellipsis :line-clamp="7" style="max-height: 240px" :tooltip="{scrollable:true,width:600,style:{maxHeight: '340px'}}">
            {{ info.intro }}
          </n-ellipsis>
        </template>
        <template  #footer>
          单曲： <n-number-animation  :from="0" :to="info.num" />
        </template>
      </n-thing>
    </n-card>
    <n-card class="no_one">
      <n-thing class="tab_thing">
        <template #avatar>
          <SIcon :size="30" icon="icon-yinle4"/>
        </template>
        <template  #header>
          全部音乐
        </template>
        <template  #header-extra>
          <n-space inline>
            <n-input placeholder="歌手/歌名" round/>
            <n-button  :focusable="false"  :bordered="false" >
              <SIcon :size="22" icon="icon-icon-test"/>
            </n-button>
          </n-space>
        </template>
      </n-thing>
      <n-grid x-gap="60" :cols="5" item-style="margin-top: 30px">
        <n-gi v-for="item of musicList" :key="item.id" @click="gotoMusic(item)"  style="cursor: pointer;"  @contextmenu="(e)=>handleMusicMenu(e,item)">
          <n-image
              preview-disabled
              :width="140"
              :height="140"
              :src="item.picUrl || 'src/assets/img/longjuanfeng.jpg'"
              fallback-src="src/assets/img/longjuanfeng.jpg"
          />
          <n-thing description-style="color: #B2B2B2;font-size: 12px"
                   :title="item.musicName"
                   :description="item.singerVo?.name"
          >
          </n-thing>
        </n-gi>
      </n-grid>
    </n-card>
  </n-layout>
</template>
<script setup>

import {useRoute} from "vue-router";
import SIcon from "@/components/public/SIcon.vue";
import {getSingerById} from "@/api/music/singerApi";
import {queryMusicList} from "@/api/music/musicApi";

const props = defineProps({
  handleMusicMenu:Function
})
const route = useRoute();
const id = ref();
const info = ref({})
onMounted(()=>{
  id.value = route.params.id
  getSingerInfo(route.params.id)
})
const musicList = ref([
])
function getSingerInfo(id){
  getSingerById(id).then(res=>{
    info.value = res.data || {}
    queryMusicList(1,50,{singerId:info.value.id,sortType:'creatTimeDesc'}).then(res=>{
      musicList.value = res.data.records;
      info.value.num = res.data.total
    })
  })
}
const router = useRouter();
function gotoMusic(item){
  // 跳转到歌曲详情
  router.push({
    path:`/music/${item.id}`
  })
}

</script>
<style>
.tab_thing{
  border-bottom: 2px solid #C10D0C;

}
.no_one{
  margin-top: 40px;
}
</style>
